<template>
    <div class="image-editor">
        <Row :gutter="10">
            <Col span="24">
            <Card class="slideList">
                <p slot="title" style="height: 34px">
                    <Icon type="ios-albums-outline"></Icon>
                    礼物列表
                    <Button type="success" @click="addGift">添加礼物</Button>
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="giftList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
        <Modal v-model="giftVatity" title="等级设置" @on-ok="handleSubmit('giftModel')" @on-cancel="handleReset('giftModel')">
            <Form :model="giftModel" :label-width="80">
                <FormItem label="礼物名称" prop="name">
                    <Input v-model="giftModel.name" placeholder="请输入礼物名称" />
                </FormItem>
                <FormItem label="金币">
                    <InputNumber :max="1000000" :min="0" v-model="giftModel.glod" ></InputNumber>
                </FormItem>
                <FormItem label="礼物描诉" prop="details">
                    <Input v-model="giftModel.details" placeholder="请输入礼物描述" />
                </FormItem>

                <FormItem label="可连续点击" prop="isContinuity">
                    <Select v-model="giftModel.isContinuity" style="width:100px">
                        <Option v-for="item in isContinuityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="主播拥金">
                    <InputNumber :max="100" :min="0" v-model="giftModel.commission" ></InputNumber>
                </FormItem>
                <FormItem label="主播经验">
                    <InputNumber :max="10000" :min="0" v-model="giftModel.aExp" ></InputNumber>
                </FormItem>
                <FormItem label="会员经验">
                    <InputNumber :max="10000" :min="0" v-model="giftModel.mExp" ></InputNumber>
                </FormItem>
                <div>
                    <div class="demo-upload-list" v-for="item in uploadList">
                        <template v-if="item.status === 'finished'">
                            <img :src="item.url">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                            </div>
                        </template>
                        <template v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                        </template>
                    </div>
                    <Upload
                            ref="upload"
                            limit="1"
                            :show-upload-list="false"
                            :default-file-list="defaultList"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="512"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="handleBeforeUpload"
                            multiple
                            type="drag"
                            action="http://115.28.157.85:9898/upload/wgj/img"
                            style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="camera" size="20"></Icon>
                        </div>
                    </Upload>
                </div>
            </Form>
        </Modal>
        <Modal title="View Image" v-model="visible">
            <img :src=imgName v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '礼物编号',
                        align: 'center',
                        key: 'id',
                        "sortable": true,
                    },
                    {
                        title: '名称',
                        align: 'center',
                        key: 'name',
                    },
                    {
                        title:'图标',
                        width:"100px",
                        align: 'center',
                        className:'icon',
                        render: (h, params) => {
                            const row = params.row;
                            const icon = row.icon;
                            return h('img', {
                                attrs: {
                                    src:icon,
                                },
                                style:{
                                    width:"70px",
                                    height:'70px'
                                }
                            });
                        }
                    },
                    {
                        title: '金币',
                        align: 'center',
                        key: 'glod',
                    },
                    {
                        title:'能连续点击',
                        key:'isContinuity',
                        align:'center',
                        width:'120px',
                        filters: [
                            {label: '否',value: 0},
                            {label: '是',value: 1}

                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.isContinuity === 0;
                            } else if (v === 1) {
                                return r.isContinuity === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.isContinuity==1){
                                return h('Icon', {
                                    props: {
                                        type:"checkmark",
                                        color:'#009966'
                                    }
                                });

                            }else {
                                return h('Icon', {
                                    props: {
                                        type:"android-close",
                                        color:'#990000'
                                    }
                                });
                            }
                        }
                    },
                    {
                        title: '礼物描诉',
                        align: 'center',
                        key: 'details',
                    },

                    {
                        title: '主播拥金',
                        align: 'center',
                        key: 'commission',
                    },
                    {
                        title: '主播经验',
                        align: 'center',
                        key: 'aExp',
                    },
                    {
                        title: '会员经验',
                        align: 'center',
                        key: 'mExp',
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        key: 'createTime',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.upGift(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteGift(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                selectURl:'/gift/list',
                upOrAddURl:'/gift/saveoredit',
                deleteURl:'/gift/delete',
                giftVatity:false,
                giftList:[],
                tipeNews:'暂无数据',
                giftModel:{},
                isContinuityList:[{
                            value: 0,
                            label: '不可连续'
                        },
                        {
                            value: 1,
                            label: '可连续点击'
                        }],
                //图片上传
                defaultList: [],
                imgName: '',
                visible: false,
                uploadList:[],
                total:0,
                pageSize:0,
                page:1,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self=this;
                self.$axios.get(self.selectURl+'?curr='+self.page).then((res) => {
                    for (var i = 0;i<res.data.data.rows.length;i++){
                        let time =  new Date(parseInt(("/Date("+res.data.data.rows[i].createTime+")/").substr(6, 13))).toLocaleDateString();
                        res.data.data.rows[i].createTime = time;
                    }
                    self.giftList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            upGift(index){
                let self=this;
                self.defaultList=[];
                self.uploadList=[];
                self.giftModel = self.giftList[index];
                self.defaultList.push({
                    'name': self.giftList[index].name,
                    'url': self.giftList[index].icon
                });
                self.uploadList.push({
                    'status': 'finished',
                    'url': self.giftList[index].icon
                });
                self.giftVatity = true;
            },
            deleteGift(index){
                let self=this;
                let giftDele = self.giftList[index];
                self.$axios.post(self.deleteURl+'/'+giftDele.id).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，删除礼物成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            addGift(){
                let self=this;
                self.defaultList=[];
                self.uploadList=[];
                self.giftModel={};
                self.giftVatity = true;
            },
            handleSubmit(name){
                let self=this;
                self.giftVatity=false;
                self.$axios.post(self.upOrAddURl,self.giftModel).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，添加成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，添加失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleReset(name){
                this.giftVatity=false;
            },

            //图片上传

            //看大图
            handleView () {
                this.imgName = this.uploadList[0].url;
                this.visible = true;
            },
            //删除图片
            handleRemove (file) {
                this.uploadList=[];
            },
            //上传成功
            handleSuccess (res, file) {
                let self=this;
                self.giftModel.icon = file.response[0].filePath;
                this.defaultList.push({
                    'name': file.name,
                    'url': file.response[0].filePath
                });
                this.uploadList.push({
                    'status': 'finished',
                    'url': file.response[0].filePath
                });
            },
            //上传错误时
            handleFormatError (file) {
                debugger;
                this.$Notice.warning({
                    title: '图片格式不对！！！',
                    desc:  file.name + ' 格式不对。请上传 jpg,jpeg,png格式的。'
                });
            },
            //上传大小超过时
            handleMaxSize (file) {
                debugger;
                this.$Notice.warning({
                    title: '图片大小超出',
                    desc: file.name + '这个张图片超过512KB',
                });
            },
            //上传之前
            handleBeforeUpload (file) {
                const check = this.uploadList.length < 1;
                if (!check) {
                    this.$Notice.warning({
                        title: '只能上传一张图标'
                    });
                }
                return check;
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
</script>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>